import React, { useCallback, useMemo } from 'react';
import { useDndContext } from '@dnd-kit/core';
import { DraggableItem, Wrapper, DraggableOverlay } from '../../components';
import { templateList } from '../../internals/mock';

const imgOptions = {
  style: {
    width: '200px',
    height: '94px',
    objectFit: 'cover',
  },
};

interface IProps {}

function TemplateTpl(props: IProps) {
  const {} = props;
  const { active } = useDndContext();

  const handleShowElement = useCallback((imgUrl) => {
    // @ts-ignore
    return <img src={imgUrl} alt="" {...imgOptions} />;
  }, []);

  const activeData = useMemo(() => {
    return templateList.filter((item) => active?.id === item.id)[0];
  }, [active?.id]);

  return (
    <div>
      {templateList.map((item) => {
        return (
          <Wrapper key={item.id}>
            <DraggableItem
              id={item.id}
              handle
              label={item.templateId}
              showElement={handleShowElement(item.imgUrl)}
              draggableData={{ type: 'template' }}
            />
          </Wrapper>
        );
      })}
      {/* <DraggableOverlay showElement={handleShowElement(activeData?.imgUrl ?? '')} /> */}
    </div>
  );
}

export default TemplateTpl;
